<!-- 工作记录组件 -->
<template>
  <view v-if="showWorkControls" class="work-records">
    <text class="work-section-title">我的工作记录</text>
    
    <!-- 加载状态 -->
    <view v-if="workLoading" class="loading">
      <text>加载中...</text>
    </view>
    
    <!-- 错误状态 -->
    <view v-else-if="workError" class="error">
      <text>{{ workError }}</text>
    </view>
    
    <!-- 工作记录列表 -->
    <view v-else>
      <view v-if="!workTimes || workTimes.length === 0" class="empty-records">
        <text>暂无记录</text>
      </view>
      <view v-else>
        <view 
          v-for="wt in workTimes" 
          :key="wt.id || wt.workTimeId" 
          class="work-item"
        >
          <view class="work-item-row">
            <text class="work-item-label">开始</text>
            <text class="work-item-value">
              {{ formatDateTime(wt.startTime || wt.start_at || wt.start) }}
            </text>
          </view>
          <view class="work-item-row">
            <text class="work-item-label">结束</text>
            <text class="work-item-value">
              {{ formatDateTime(wt.endTime || wt.end_at || wt.end) }}
            </text>
          </view>
          <view class="work-item-row">
            <text class="work-item-label">时长</text>
            <text class="work-item-value">
              {{ calculateDuration(wt) }}
            </text>
          </view>
          <view v-if="wt.description" class="work-item-row">
            <text class="work-item-label">描述</text>
            <text class="work-item-value">{{ wt.description }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 工作控制按钮 -->
    <view v-if="showWorkControls" class="work-controls">
      <button 
        v-if="!isWorking" 
        class="start-work-btn" 
        @click="$emit('start-work')"
      >
        <text>开始工作</text>
      </button>
      <button 
        v-else 
        class="end-work-btn" 
        @click="$emit('end-work')"
      >
        <text>结束工作</text>
      </button>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

// Props
const props = defineProps({
  showWorkControls: {
    type: Boolean,
    default: false
  },
  workLoading: {
    type: Boolean,
    default: false
  },
  workError: {
    type: String,
    default: ''
  },
  workTimes: {
    type: Array,
    default: () => []
  },
  isWorking: {
    type: Boolean,
    default: false
  }
})

// Emits
const emit = defineEmits(['start-work', 'end-work'])

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return '未知'
  
  try {
    const date = new Date(dateTime)
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })
  } catch (error) {
    return '格式错误'
  }
}

// 计算工作时长
const calculateDuration = (workTime) => {
  try {
    const startTime = new Date(workTime.startTime || workTime.start_at || workTime.start)
    const endTime = new Date(workTime.endTime || workTime.end_at || workTime.end)
    
    if (isNaN(startTime.getTime()) || isNaN(endTime.getTime())) {
      return '计算错误'
    }
    
    const duration = endTime.getTime() - startTime.getTime()
    const hours = Math.floor(duration / (1000 * 60 * 60))
    const minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60))
    
    if (hours > 0) {
      return `${hours}小时${minutes}分钟`
    } else {
      return `${minutes}分钟`
    }
  } catch (error) {
    return '计算错误'
  }
}
</script>

<style scoped>
.work-records {
  margin: 20rpx 0;
  padding: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.work-section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.loading,
.error {
  text-align: center;
  padding: 40rpx;
  font-size: 28rpx;
}

.loading {
  color: #666;
}

.error {
  color: #f44336;
}

.empty-records {
  text-align: center;
  padding: 40rpx;
  color: #999;
  font-size: 28rpx;
}

.work-item {
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 15rpx;
  border-left: 6rpx solid #4CAF50;
}

.work-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.work-item-row:last-child {
  margin-bottom: 0;
}

.work-item-label {
  font-size: 26rpx;
  color: #666;
  font-weight: 500;
  min-width: 120rpx;
}

.work-item-value {
  font-size: 26rpx;
  color: #333;
  flex: 1;
  text-align: right;
}

.work-controls {
  margin-top: 30rpx;
  display: flex;
  justify-content: center;
}

.start-work-btn,
.end-work-btn {
  padding: 20rpx 40rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  min-width: 200rpx;
}

.start-work-btn {
  background: #4CAF50;
  color: white;
}

.end-work-btn {
  background: #f44336;
  color: white;
}
</style>
